<template>
	<view class="">
		<view class="c_presentab">
			<view class="c_presentabitem" @tap="tab(1)">
				<view class="c_i" :class="{c_iactive:active==1}">
					全部优惠券
				</view>
			</view>
			<!-- <view class="c_presentabitem" @tap="tab(2)">
				<view class="c_i" :class="{c_iactive:active==2}">
					已使用
				</view>
			</view>
			<view class="c_presentabitem" @tap="tab(3)">
				<view class="c_i" :class="{c_iactive:active==3}">
					已过期
				</view>
			</view> -->
		</view>
		<view class="">
			<view class="c_couponlist" @tap="go('Receiveinfo',item.id)" v-for="item in list">
				<view class="">
					<view class="">
						{{item.couponname}}
					</view>
					<view class="">
						{{item.timelimit=='0'?'有效期：'+item.timedays+'天':'到期时间：'+item.timestr}}
					</view>
					<view class="">
						免费领取 每人限{{item.getmax}}张
					</view>
				</view>
				<view class="">
					<view class="" style="font-size: 20px;">
						￥ {{item.deduct}}
					</view>
					<view class="">
						{{item.backstr}}
					</view>
				</view>
			</view>
		</view>
		<view class="hback" v-show="empty">
			<image src="../../static/biaodan.png" mode="widthFix"></image>
			<view>空空如也~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				list: [],
				empty: false
			}
		},
		onReachBottom() {
			var that = this;
			that.page = that.page + 1;
			if (that.active == 1) {
				that.$axios('My/main', "POST", 'coupon', {
					page: that.page
				}).then(res => {
					if (res.data.code == 200) {
						that.list = that.list.concat(res.data.data.list)
					}
				}, (error) => {

				})
			} else if (that.active == 2) {
				that.$axios('My/main', "POST", 'coupon', {
					used: 1,
					page: that.page
				}).then(res => {
					if (res.data.code == 200) {
						that.list = that.list.concat(res.data.data.list)
					}
				}, (error) => {

				})
			} else {
				that.$axios('My/main', "POST", 'coupon', {
					past: 1,
					page: that.page
				}).then(res => {
					if (res.data.code == 200) {
						that.list = that.list.concat(res.data.data.list)
					}
				}, (error) => {

				})
			}
		},
		onLoad(option) {
			var that = this;
			this.$axios('Index/main', "POST", 'coupon').then(res => {
				if (res.data.code == 200) {
					that.list = res.data.data.list;
					that.empty = that.list.length == 0 ? true : false;
				}
			}, (error) => {

			})
		},
		methods: {
			tab: function(index) {
				var that = this;
				this.active = index;
				that.page = 1;
				that.list = []
				if (index == 1) {
					that.$axios('My/main', "POST", 'coupon', {
						page: that.page
					}).then(res => {
						if (res.data.code == 200) {
							that.list = res.data.data.list
						}
					}, (error) => {

					})
				} else if (index == 2) {
					that.$axios('My/main', "POST", 'coupon', {
						used: 1,
						page: 1
					}).then(res => {
						if (res.data.code == 200) {
							that.list = res.data.data.list
						}
					}, (error) => {

					})
				} else {
					that.$axios('My/main', "POST", 'coupon', {
						past: 1,
						page: 1
					}).then(res => {
						if (res.data.code == 200) {
							that.list = res.data.data.list
						}
					}, (error) => {

					})
				}
			},
			go(url, id) {
				uni.navigateTo({
					url: url + "?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #eee;
	}

	.c_presentab {
		background: #fff;
		display: flex;
		justify-content: space-between;

		.c_presentabitem {
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			width: 25%;

			.c_i {
				display: inline-block;
			}

			.c_iactive {
				border-bottom: 2px solid $base-color;
			}
		}
	}

	.c_couponlist {
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 20upx;
		margin: 10upx 0;
	}

	.hback {
		position: fixed;
		top: 25%;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #666;
		font-size: 32upx;

		image {
			width: 200upx;
		}
	}
</style>
